<template>
	<view class="page-custom-photo">
		<view class="top-container">
			<image class="zjx-photo" :src="`${imagePrefix}/photo/zjz-test.png`"></image>
		</view>

		<view class="field-container">
			<view class="field-title">自定义照片</view>
			<view class="field-item">
				<text class="field-item-title">尺寸(必填)</text>
				<view class="field-item-control">
					<view class="field-item-content flex-between-center">
						<input type="number" v-model="formData.width" class="normal-input short" maxlength="4"
							placeholder="宽" />
						<text>x</text>
						<input type="number" v-model="formData.height" class="normal-input short" maxlength="4"
							placeholder="高" />

						<text @tap="onChangeUnit">{{ state.sizeUnits[0] }}</text>
						<image @tap="onChangeUnit" class="change-icon" src="/static/print/change.png" mode="widthFix"></image>
						<text @tap="onChangeUnit" class="gray-text">{{ state.sizeUnits[1] }}</text>
					</view>
					<view v-if="state.errorSize" class="field-item-error">{{ state.errorSize }}</view>
				</view>
			</view>
			<view class="field-item">
				<text class="field-item-title">文件大小</text>
				<view class="field-item-control">
					<view class="field-item-content flex-start-center">
						<input type="number" v-model="formData.fileSizeLow" class="normal-input short" maxlength="4"
							placeholder="最小" />
						<text>~</text>
						<input type="number" v-model="formData.fileSizeHigh" class="normal-input short" maxlength="4"
							placeholder="最大" />
						<text>KB</text>
					</view>
					<view v-if="state.errorFileSize" class="field-item-error">{{ state.errorFileSize }}</view>
				</view>
			</view>

			<view class="field-item">
				<text class="field-item-title">分辨率</text>
				<view class="field-item-control">
					<view class="field-item-content flex-start-center">
						<input v-model="formData.reslRadio" class="normal-input middle" type="number" maxlength="3"
							placeholder="300（推荐值）" />
						<text>DPI</text>
						<image @tap="onShowInfo" class="info-icon" src="/static/print/info.png"></image>
					</view>
					<view v-if="state.errorReslRadio" class="field-item-error">{{ state.errorReslRadio }}</view>
				</view>
			</view>
			<view class="custom-button full-button" @tap="onSubmit">
				<u-button type="primary" :disabled="disabled" shape="circle" text="开始制作"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	watch,
	computed,
} from "vue";
import {imagePrefix} from '@/common/js/data.js';

const state = reactive({
	sizeUnits: ['px', 'mm'],
	errorSize: '',
	errorFileSize: '',
	errorReslRadio: '',
});
const formData = reactive({
	width: '',
	height: '',
	fileSizeLow: '',
	fileSizeHigh: '',
	reslRadio: '',
});


// 一个计算属性 ref
const disabled = computed(() => {
	const {
		width,
		height,
		fileSizeLow,
		fileSizeHigh,
		reslRadio,
	} = formData;
	console.log('computed', !width || !height || !fileSizeLow || !fileSizeHigh)
	return !width || !height || !fileSizeLow || !fileSizeHigh;
})

// ppi，分辨率，用于计算和提交
const ppi = computed(() => {
	return formData.reslRadio ? +formDAta.reslRadio : 300;
})

const onChangeUnit = () => {
	state.sizeUnits.reverse();
}

const onShowInfo = () => {
	uni.$u.toast("DPI是图片分辨率的单位，无特殊要求可使用默认值")
}

const resetErrState = () => {
	state.errorSize = '';
	state.errorFileSize = '';
	state.reslRadio = '';
}

const validate = () => {
	resetErrState();
	let {
		width,
		height,
		fileSizeLow,
		fileSizeHigh,
		reslRadio,
	} = formData;
	// 转为数字
	width = +width;
	height = +height;
	fileSizeLow = +fileSizeLow;
	fileSizeHigh = +fileSizeHigh;
	reslRadio = +reslRadio;

	if (state.sizeUnits[0] === 'px') {
		if (width < 100 || width > 1000 || height < 100 || height > 1000) {
			state.errorSize = '照片宽、高范围：100-1000px';
			return false;
		}
	} else {
		if (width < 10 || width > 80 || height < 10 || height > 80) {
			state.errorSize = '照片宽、高范围：10-80mm';
			return false;
		}
	}

	if (fileSizeLow < 5 || fileSizeLow > 1500 || fileSizeHigh < 5 || fileSizeHigh > 1500 || fileSizeLow >=
		fileSizeHigh) {
		state.errorFileSize = '文件大小设置范围：5-1500KB，且最大值＞最小值';
		return false;
	}

	// 如果有写分辨率
	if (reslRadio) {
		if (reslRadio < 72 || reslRadio > 600) {
			state.reslRadio = '分辨率设置范围：72-600DPI';
			return false;
		}
	}

	// 校验
	return true;
}

import {
	pxTomm,
	mmTopx
} from "@/common/js/method.js";

const getSizeinfo = () => {
	const {
		width,
		height,
	} = formData;
	const unit = state.sizeUnits[0];
	if (unit === 'px') {
		return {
			width: pxTomm(width, ppi.value),
			height: pxTomm(height, ppi.value),
			widthPixel: +width,
			heightPixel: +height,
		}
	} else if (unit === 'mm') {
		return {
			width: +width,
			height: +height,
			widthPixel: mmTopx(width, ppi.value),
			heightPixel: mmTopx(height, ppi.value),
		}
	}
};

const toMakePhoto = () => {
	// console.log(getSizeinfo())
	const data = {
		name: '自定义照片',
		...getSizeinfo(),
		minSize: +formData.fileSizeLow,
		maxSize: +formData.fileSizeHigh,
		dpi: ppi.value,
	};
	uni.navigateTo({
		url: `/pages/make-photo/make-photo?type=custom&data=${JSON.stringify(data)}`
	})
};
const onSubmit = () => {
	console.log(disabled.value);
	if (disabled.value) return;
	const validateRes = validate();
	if (!validateRes) return;
	// 跳转制作页面
	toMakePhoto()
}
</script>


<style lang="less" scoped>
.page-custom-photo {
	// height: 100vh;
	background: rgba(245, 245, 245, 1);
	

	.top-container {
		height: 758rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.zjx-photo {
			width: 300rpx;
			height: 400rpx;
		}
	}
	

	.field-container {
		width: 100%;
		box-sizing: border-box;
		height: 682rpx;
		border-radius: 32rpx 32rpx 0 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4rpx 12rpx rgba(0, 0, 0, 0.02);
		padding: 28rpx 32rpx 68rpx 32rpx;
		// position: fixed;
		// left: 0;
		// bottom: 0;

		.field-title {
			font-size: 32rpx;
			line-height: 48rpx;
			color: rgba(0, 0, 0, 1);
			text-align: center;
			margin-bottom: 56rpx;
		}

		.field-item {
			font-size: 28rpx;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
		}

		.field-item-title {
			min-width: 144rpx;
			margin-right: 12rpx;
		}

		.field-item-control {
			flex: 1;
			position: relative;
		}

		.field-item-content {
			gap: 14rpx;
		}

		.field-item-error {
			font-size: 20rpx;
			font-weight: 500;
			line-height: 30rpx;
			color: rgba(255, 102, 102, 1);
			position: absolute;
			top: calc(100% + 4rpx);
			left: 0;
		}

		.normal-input {
			text-align: center;
			// width: 168rpx;
			height: 70rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			background: rgba(245, 245, 245, 1);

			&.short {
				width: 168rpx;
			}

			&.middle {
				width: 378rpx;
			}
		}

		.change-icon {
			width: 28rpx;
			height: 26rpx;
			// margin: 0 8rpx;
		}

		.info-icon {
			width: 34rpx;
			height: 34rpx;
		}
		.custom-button {
			height: 104rpx;
		}
	}
}
</style>